<template>
	<view>
		<view class="form">

			<u-row gutter="10">
				<u-col span="6">
					<view class="form-item">
						<view class="form-item-label">谱名 <text>*</text></view>
						<view class="form-item-rig">
							<view class="form-item-input">
								<input type="text" placeholder="家谱名字(不填姓氏）" placeholder-class="input-ac"
									v-model="form.genealogy_name" />
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="form-item">
						<view class="form-item-label">字名</view>
						<view class="form-item-rig">
							<view class="form-item-input">
								<input type="text" placeholder="身份证名与谱名" placeholder-class="input-ac"
									v-model="form.name" />
							</view>
						</view>
					</view>
				</u-col>

			</u-row>
			<u-row gutter="10">
				<u-col span="6">
					<view class="form-item">
						<view class="form-item-label">性别 <text>*</text></view>
						<picker mode="selector" :range="sexList" range-key="label" @change="e => change('sex',e)">
							<view class="form-item-rig">
								<view class="form-item-input">
									<input type="text" placeholder="选择性别" placeholder-class="input-ac" disabled
										:value="getName(form.sex,sexList)" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</view>
						</picker>

					</view>
				</u-col>
				<u-col span="6">
					<view class="form-item">
						<view class="form-item-label">婚否</view>
						<picker mode="selector" :range="isMarryList" range-key="label"
							@change="e => change('is_marry',e)">
							<view class="form-item-rig">
								<view class="form-item-input">
									<input type="text" placeholder="选择婚否" placeholder-class="input-ac" disabled
										:value="getName(form.is_marry,isMarryList)" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</view>
						</picker>
					</view>
				</u-col>
			</u-row>
			<u-row gutter="10">
				<u-col span="6">
					<view class="form-item">
						<view class="form-item-label">号名 <text>*</text></view>
						<view class="form-item-rig">
							<view class="form-item-input">
								<input type="text" placeholder="请填写号名乳名小名" placeholder-class="input-ac"
									v-model="form.infant_name" />
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="form-item">
						<view class="form-item-label">曾用名</view>
						<view class="form-item-rig">
							<view class="form-item-input">
								<input type="text" placeholder="请填写曾用名" placeholder-class="input-ac"
									v-model="form.former_name" />
							</view>
						</view>
					</view>
				</u-col>
			</u-row>
			<view class="form-item">
				<view class="form-item-label">头像 <text class="form-item-label-subTitle">(本人照片)</text><text>*</text></view>
				<view class="form-item-rig">
					<view class="form-item-rig-upload">
						<view class="form-item-rig-upload-add flex-center" @click="upload('avatar')"
							v-if="!form.avatar">
							<image src="/static/photo-b-照相.png" mode=""></image>
							上传图片
						</view>
						<image :src="form.avatar" mode="aspectFill" v-else></image>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">行辈|字辈|支派房公</view>
				<view class="form-item-rig">
					<div class="form-item-rig-more">
						<view class="form-item-input" style="width: 240rpx;flex: unset">
							<input type="text" placeholder="派" placeholder-class="input-ac" disabled v-model="form.hang_bei"/>
							<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
						</view>
						<view>
							<picker mode="selector" :range="generationList" range-key="label"
								@change="e => changeGeneration('generation',e,generationList)">
								<view class="form-item-rig">
									<view class="form-item-input">
										<input type="text" placeholder="请选择字辈" placeholder-class="input-ac" disabled
											:value="form.generation" />
										<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
									</view>
								</view>
							</picker>
						</view>
						<view>
							<picker mode="selector" :range="fang_gongList" range-key="label"
								@change="e => changeName('fang_gong',e,fang_gongList)">
								<view class="form-item-rig">
									<view class="form-item-input">
										<input type="text" placeholder="选择支派房公" placeholder-class="input-ac" disabled
											:value="form.fang_gong" />
										<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
									</view>
								</view>
							</picker>
						</view>
					</div>

				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">出生日期 <text>*</text></view>
				<view class="form-item-rig">
					<div class="form-item-rig-more">
						<view style="width: 240rpx;flex: unset">
							<picker mode="selector" :range="timeEnum" range-key="label"
								@change="e => change('birth_time_type',e)">
								<view class="form-item-input">
									<input type="text" placeholder="农历" placeholder-class="input-ac" disabled
										:value="getName(form.birth_time_type,timeEnum)" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</picker>
						</view>

						<view>
							<DateValue v-model="form.birth">
								<view class="form-item-input">
									<input type="text" placeholder="日期" placeholder-class="input-ac" disabled
										:value="form.birth" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</DateValue>
						</view>
						<view>
							<picker mode="time" @change="changeTime">
								<view class="form-item-input">
									<input type="text" placeholder="时间" placeholder-class="input-ac" disabled
										:value="birth_time" />
									<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
								</view>
							</picker>
						</view>

					</div>

				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">出生地址</view>
				<view class="form-item-rig">
					<picker mode="region" @change="changeAddress">
						<view class="form-item-input">
							<input type="text" placeholder="请选择省、市、区" placeholder-class="input-ac" disabled
								:value="getAddress" />
							<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
						</view>
					</picker>

				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">出生详细地址</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入小区、写字楼、门牌号等" placeholder-class="input-ac"
							v-model="form.birth_address_info" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">家庭地址 <text>*</text></view>
				<view class="form-item-rig">
					<picker mode="region" @change="changeFamilyAddress">
						<view class="form-item-input">
							<input type="text" placeholder="请选择省、市、区" placeholder-class="input-ac" disabled
								:value="getFamilyAddress" />
							<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
						</view>
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">家庭详细地址 <text>*</text></view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入小区、写字楼、门牌号等" placeholder-class="input-ac"
							v-model="form.family_address_info" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">通讯方式</view>
				<view class="form-item-rig">
					<view class="form-item-input">
						<input type="text" placeholder="请输入通讯号码" placeholder-class="input-ac" v-model="form.phone" />
					</view>
				</view>
			</view>
			<block v-if="form.sex == 1">
				<u-row gutter="10">
					<u-col span="6">
						<view class="form-item">
							<view class="form-item-label">民族</view>
							<picker mode="selector" :range="famousClanEnum" range-key="label"
								@change="e => changeName('famous_clan',e,famousClanEnum)">
								<view class="form-item-rig">
									<view class="form-item-input">
										<input type="text" placeholder="请选择民族" placeholder-class="input-ac" disabled
											:value="form.famous_clan" />
										<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
									</view>
								</view>
							</picker>

						</view>
					</u-col>
					<u-col span="6">
						<view class="form-item">
							<view class="form-item-label">籍贯</view>
							<view class="form-item-rig">
								<view class="form-item-input">
									<input type="text" placeholder="请输入籍贯" placeholder-class="input-ac"
										v-model="form.native_place" />
								</view>
							</view>
						</view>
					</u-col>

				</u-row>
				<u-row gutter="10">
					<u-col span="6">
						<view class="form-item">
							<view class="form-item-label">职业</view>
							<view class="form-item-rig">
								<view class="form-item-input">
									<input type="text" placeholder="请填写职业" placeholder-class="input-ac"
										v-model="form.career" />
								</view>
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="form-item">
							<view class="form-item-label">学历</view>
							<picker mode="selector" :range="qualificationEnum" range-key="label"
								@change="e => changeName('qualification',e,qualificationEnum)">
								<view class="form-item-rig">
									<view class="form-item-input">
										<input type="text" placeholder="请选择学历" placeholder-class="input-ac" disabled
											:value="form.qualification" />
										<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
									</view>
								</view>
							</picker>
						</view>
					</u-col>

				</u-row>
				<view class="form-item">
					<view class="form-item-label">其他信息</view>
					<view class="form-item-rig">
						<view class="form-item-input">
							<input type="text" placeholder="请填写其他信息" placeholder-class="input-ac" 
								v-model="form.other" />
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">继嗣</view>
					<view class="form-item-rig">
						<div class="form-item-rig-more">
							<view class="form-item-input" style="width: 200rpx;flex: unset;">
								<input type="text" placeholder="入继" placeholder-class="input-ac" disabled />
								<u-icon name="arrow-down-fill" color="#84643B" size="14"></u-icon>
							</view>
							<view class="form-item-input">
								<input type="text" placeholder="张XX三子入继" placeholder-class="input-ac"
									v-model="form.heir" />

							</view>
						</div>

					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">统计</view>
					<view class="form-item-rig">
						<view class="form-item-input">
							<input type="text" placeholder="请填写统计" placeholder-class="input-ac" v-model="form.statistics" />
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">备注</view>
					<view class="form-item-rig">
						<view class="form-item-input">
							<textarea placeholder="请填写备注" placeholder-class="input-ac"  v-model="form.notes"></textarea>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="form-btn flex-center" @click="submit">确定</view>
		<u-gap height="30" bgColor="#F6F1E7"></u-gap>

	</view>
</template>

<script>
	import DateValue from '@/components/date/date.vue'
	import {
		uploadImg
	} from '@/common/upload.js'
	import {
		genealogyAddHttp,genealogyDataInfoHttp,genealogyGenerationListHttp
	} from '@/common/http/api.js'
	export default {
		name: "basicInfo",
		components: {
			DateValue
		},
		data() {
			return {
				show: false,
				form: {
					type: '2', //1配偶，2子女，3兄弟姐妹，4入继，5父亲，6母亲，7姐妹，8祖父
					genealogy_id: '',
					pid: '',
					genealogy_name: '',
					name: '',
					sex: '',
					is_marry: '',
					infant_name: '',
					former_name: '',
					avatar: '',
					birth_time_type: 1, //1农历 2阳历
					birth: '',
					birth_time: '',
					birth_address_province: '',
					birth_address_city: '',
					birth_address_area: '',
					birth_address_info: '',
					family_address_province: '',
					family_address_city: '',
					family_address_area: '',
					family_address_info: '',
					phone: '',
					famous_clan: '',
					native_place: '',
					career: '',
					qualification: '',
					other: '',
					heir: '',
					notes: '',
					statistics: '',
					hang_bei: '',
					generation:'',
					fang_gong: ''
				},
				birth_time: '',
				generationList: [],
				fang_gongList: [],
				generationInfo: '', //当前世代
				sexList: [
					{
						value: 1,
						label: '男'
					},
					{
						value: 2,
						label: '女'
					}
				],
				isMarryList: [{
						value: 1,
						label: '已婚'
					},
					{
						value: 2,
						label: '未婚'
					}
				],
				timeEnum: [{
						value: 1,
						label: '农历'
					},
					{
						value: 2,
						label: '阳历'
					}
				],
				qualificationEnum: [{
						value: '小学',
						label: '小学'
					},
					{
						value: '初中',
						label: '初中'
					},
					{
						value: '高中',
						label: '高中'
					},
					{
						value: '中专/职高',
						label: '中专/职高'
					},
					{
						value: '技校',
						label: '技校'
					},
					{
						value: '大专',
						label: '大专'
					},
					{
						value: '本科',
						label: '本科'
					},
					{
						value: '硕士',
						label: '硕士'
					},
					{
						value: '博士',
						label: '博士'
					},
					{
						value: '博士后',
						label: '博士后'
					},
					{
						value: '其他',
						label: '其他'
					}
				],
				famousClanEnum: [{
						value: '汉族',
						label: '汉族'
					},
					{
						value: '壮族',
						label: '壮族'
					},
					{
						value: '满族',
						label: '满族'
					},
					{
						value: '回族',
						label: '回族'
					},
					{
						value: 'Miao',
						label: '苗族'
					},
					{
						value: '维吾尔族',
						label: '维吾尔族'
					},
					{
						value: '土家族',
						label: '土家族'
					},
					{
						value: '彝族',
						label: '彝族'
					},
					{
						value: '蒙古族',
						label: '蒙古族'
					},
					{
						value: '藏族',
						label: '藏族'
					},
					{
						value: '布依族',
						label: '布依族'
					},
					{
						value: '侗族',
						label: '侗族'
					},
					{
						value: '瑶族',
						label: '瑶族'
					},
					{
						value: '白族',
						label: '白族'
					},
					{
						value: '朝鲜族',
						label: '朝鲜族'
					},
					{
						value: '哈尼族',
						label: '哈尼族'
					},
					{
						value: '黎族',
						label: '黎族'
					},
					{
						value: '傣族',
						label: '傣族'
					},
					{
						value: '畲族',
						label: '畲族'
					},
					{
						value: '傈僳族',
						label: '傈僳族'
					},
					{
						value: '东乡族',
						label: '东乡族'
					},
					{
						value: '纳西族',
						label: '纳西族'
					},
					{
						value: '景颇族',
						label: '景颇族'
					},
					{
						value: '撒拉族',
						label: '撒拉族'
					},
					{
						value: '布朗族',
						label: '布朗族'
					},
					{
						value: '达斡尔族',
						label: '达斡尔族'
					},
					{
						value: '高山族',
						label: '高山族'
					},
					{
						value: '水族',
						label: '水族'
					},
					{
						value: '仡佬族',
						label: '仡佬族'
					},
					{
						value: '拉祜族',
						label: '拉祜族'
					},
					{
						value: '佤族',
						label: '佤族'
					},
					{
						value: '德昂族',
						label: '德昂族'
					},
					{
						value: '普米族',
						label: '普米族'
					},
					{
						value: '阿昌族',
						label: '阿昌族'
					},
					{
						value: '怒族',
						label: '怒族'
					},
					{
						value: '基诺族',
						label: '基诺族'
					},
					{
						value: '乌孜别克族',
						label: '乌孜别克族'
					},
					{
						value: '俄罗斯族',
						label: '俄罗斯族'
					},
					{
						value: '裕固族',
						label: '裕固族'
					},
					{
						value: '塔塔尔族',
						label: '塔塔尔族'
					},
					{
						value: '鄂伦春族',
						label: '鄂伦春族'
					},
					{
						value: '赫哲族',
						label: '赫哲族'
					},
					{
						value: '门巴族',
						label: '门巴族'
					},
					{
						value: '珞巴族',
						label: '珞巴族'
					},
					{
						value: '锡伯族',
						label: '锡伯族'
					},
					{
						value: '仫佬族',
						label: '仫佬族'
					},
					{
						value: '毛南族',
						label: '毛南族'
					}
				]
			}
		},
		computed: {
			getAddress() {
				let address = ''
				if (this.form.birth_address_province) {
					address = this.form.birth_address_province + '-' + this.form.birth_address_city + '-' + this.form
						.birth_address_area
				}
				return address
			},
			getFamilyAddress() {
				let address = ''
				if (this.form.family_address_province) {
					address = this.form.family_address_province + '-' + this.form.family_address_city + '-' + this.form
						.family_address_area
				}
				return address
			}
		},
		onLoad(e) {
			this.form.genealogy_id = e.genealogy_id
			
			genealogyGenerationListHttp({page: 1, pageSize: 9999}).then(res=>{
				
				if(e.id) {
					this.form.id = e.id
					genealogyDataInfoHttp({type: 2,id: e.id}).then(res=>{
						this.genealogy = res.data.info
						this.form = {
							...this.form,
							...res.data.info
						}
						this.birth_time = res.data.info.birth_time
					})
					let data = res.data.find(i=> i.hang_bei == e.hang_bei)
					this.form.hang_bei = e.hang_bei
					this.generationInfo = data
					this.generationList = data.zi_bei.map(i=>({
						label: i.key,
						value: i.key
					}))
				} else {
					
					let data = res.data
					let curent = ''
					res.data.forEach((i,index)=>{ 
						if(i.hang_bei == e.hang_bei) {
							if(index + 1 === res.data.length) {
								curent = index
							} else {
								curent = index + 1
							}
							
						}
					})
					if(curent) {
						this.form.hang_bei = data[curent].hang_bei
						this.generationInfo = data[curent]
						this.generationList = data[curent].zi_bei.map(i=>({
							label: i.key,
							value: i.key
						}))
					}
					
				}
				
			})
			
			
			this.form.pid = e.pid
			this.form.type = e.type
		
			
		},
		methods: {
			getName(val, arr) {
				let str = ''
				try {
					str = arr.find(i => i.value === val).label
				} catch (e) {

				}
				return str
			},
			change(name, e) {
				console.log('e', e)
				this.form[name] = this.sexList[e.detail.value].value
			},
			upload(name) {
				uploadImg().then(res => {
					console.log('res', res)
					this.form[name] = res.data.url
				})
			},
			convertTimeToChinese(time) {
				const timeMap = {
					'23': '子',
					'00': '子',
					'01': '丑',
					'02': '丑',
					'03': '寅',
					'04': '寅',
					'05': '卯',
					'06': '卯',
					'07': '辰',
					'08': '辰',
					'09': '巳',
					'10': '巳',
					'11': '午',
					'12': '午',
					'13': '未',
					'14': '未',
					'15': '申',
					'16': '申',
					'17': '酉',
					'18': '酉',
					'19': '戌',
					'20': '戌',
					'21': '亥',
					'22': '亥'
				};
				const [hour, minute] = time.split(':');
				return timeMap[hour];
			},
			changeTime(e) {
				console.log('e', e)
				this.form.birth_time = e.detail.value
				this.birth_time = e.detail.value + ' ' + this.convertTimeToChinese(e.detail.value)
			},
			changeAddress(e) {
				console.log('e', e)
				this.form.birth_address_province = e.detail.value[0]
				this.form.birth_address_city = e.detail.value[1]
				this.form.birth_address_area = e.detail.value[2]
			},
			changeFamilyAddress(e) {
				console.log('e', e)
				this.form.family_address_province = e.detail.value[0]
				this.form.family_address_city = e.detail.value[1]
				this.form.family_address_area = e.detail.value[2]
			},
			changeName(name, e, arr) {
				this.form[name] = arr[e.detail.value].value
			},
			changeGeneration(name, e, arr){
				this.changeName(name, e, arr)
				this.fang_gongList = this.generationInfo.zi_bei.filter(i=> i.key == this.form.generation)[0].value.map(i=>({
					...i,
					label: i.value
				}))
				
			},
			async submit() {
				await this.$mValidate(
					[
						{
							require: true,
							key: 'genealogy_name',
							message: '请输入家谱名字'
						},
						{
							require: true,
							key: 'sex',
							message: '请选择性别'
						},
						{
							require: true,
							key: 'infant_name',
							message: '请填写号名乳名小名'
						},
						{
							require: true,
							key: 'avatar',
							message: '请上传头像'
						},
						{
							require: true,
							key: 'birth',
							message: '请选择出生日期'
						},
						{
							require: true,
							key: 'birth_time',
							message: '请选择出生日期时间'
						},
						{
							require: true,
							key: 'birth_time',
							message: '请选择出生日期时间'
						},
						{
							require: true,
							key: 'family_address_province',
							message: '请选择家庭地址'
						},
						{
							require: true,
							key: 'family_address_info',
							message: '请输入家庭详细地址'
						}
					], this.form)
					uni.showLoading()
					genealogyAddHttp(this.form).then(res=>{
						uni.hideLoading()
						setTimeout(()=>{
							uni.navigateBack()
						})
						
					})
				
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F1E7;
	}

	.form {
		width: 670rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		padding-bottom: 30rpx;

		.form-item {
			width: 100%;
			margin-bottom: 57rpx;

			.form-item-label {
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				margin-bottom: 30rpx;

				text {
					color: #e4393c;
				}

				.form-item-label-subTitle {
					color: #999999;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}

			.form-item-rig {
				width: 100%;

				.form-item-input {
					width: 100%;
					
					background: #D9CEBC;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 0 30rpx;
					display: flex;

					input {
						min-width: 0;
						flex: 1;
						height: 100%;
						height: 84rpx;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #000;
						
					}
					textarea {
						min-width: 0;
						flex: 1;
						height: 200rpx;
						padding: 20rpx 0;
						align-items: center;
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #000;
					}
					.input-ac {
						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 28rpx;
						color: #84643B;
					}
				}

				.Cover {
					width: 100%;
					display: flex;
					justify-content: space-between;

					.Cover-item {
						width: 156rpx;
						height: 212rpx;
						background: #FFFFFF;
						border-radius: 8rpx;
						border: 1px solid #D9CEBC;
						box-sizing: border-box;
						padding: 20rpx 15rpx;
						position: relative;

						.Cover-item-tx {
							width: 16rpx;
							position: absolute;
							right: 32rpx;
							bottom: 88rpx;
							height: 90rpx;
							overflow: hidden;

							view {
								height: 82rpx;
								font-family: FZXuanZhenZhuanBianS-R-GB;
								font-weight: 400;
								font-size: 16rpx;
								color: #2B3858;
								height: fit-content;
							}
						}
					}

					.Cover-item-ac {
						background: #D9CEBC;
						border-radius: 8rpx;
						border: 1px solid #84643B;
					}
				}

				.form-item-rig-textareaImg {
					width: 100%;
					background: #D9CEBC;
					border-radius: 10rpx;
					box-sizing: border-box;
					padding: 30rpx 29rpx 19rpx;

					textarea {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(132, 100, 59, 0.5);
						height: 140rpx;
						margin-bottom: 10rpx;
					}

					.textarea-ac {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #84643B;
					}

					.form-item-rig-textareaImg-img {
						width: 100%;

						.form-item-rig-textareaImg-img-add {
							width: 174rpx;
							height: 174rpx;
							background: #D9CEBC;
							border-radius: 10rpx;
							border: 1px solid #84643B;
							flex-direction: column;

							image {
								width: 37rpx;
								height: 29rpx;
								margin-bottom: 30rpx;
							}

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 24rpx;
							color: #84643B;
						}

						&>image {
							width: 174rpx;
							height: 174rpx;
							border-radius: 10rpx;
						}
					}
				}

				.form-item-rig-upload {
					width: 100%;

					.form-item-rig-upload-add {
						width: 174rpx;
						height: 174rpx;
						background: #D9CEBC;
						border-radius: 10rpx;
						border: 1px solid #84643B;
						flex-direction: column;

						image {
							width: 37rpx;
							height: 29rpx;
							margin-bottom: 30rpx;
						}

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 24rpx;
						color: #84643B;
					}

					&>image {
						width: 174rpx;
						height: 174rpx;
						border-radius: 10rpx;
					}
				}

				.form-item-rig-more {
					width: 100%;
					display: flex;
					background: #D9CEBC;

					&>div {
						flex: 1;
						min-width: 0;
					}
				}

				.development {
					width: 100%;
					position: relative;

					.development-list {
						width: 100%;
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;

						.development-l {
							width: 120rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 36rpx;
							color: #84643B;
							margin-right: 30rpx;
							position: relative;

							input {
								background: #EFE9DD;
								border-radius: 8rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(132, 100, 59, 0.5);
								width: 63%;
								padding: 10rpx;
							}

							.development-l-ac {
								color: #84643B;
								font-size: 19rpx;
							}
						}

						.development-l::after {
							width: 12rpx;
							height: 12rpx;
							background: #FFFFFF;
							border-radius: 50%;
							border: 1px solid #84643B;
							content: "";
							position: absolute;
							right: -6rpx;
							top: calc(50% - 10rpx);
							transform: rotateY(-50%);
							margin: auto;
							z-index: 9;
						}

						.development-r {
							width: 388rpx;
							background: #EFE9DD;
							border-radius: 8rpx;
							box-sizing: border-box;
							padding: 15rpx 23rpx;
							font-family: Source Han Sans CN;
							font-weight: 800;
							font-size: 24rpx;
							color: #666666;
							display: flex;

							input {
								font-size: 24rpx;
							}
						}
					}
				}

				.development::after {
					width: 1rpx;
					height: 100%;
					position: absolute;
					content: "";
					left: 118rpx;
					top: 0;
					background: #84643B;
				}
			}
		}
	}

	.form-btn {
		width: 580rpx;
		height: 99rpx;
		background: #84643B;
		border-radius: 50rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-bottom: 30rpx;
	}
</style>